<template>
	<view class="page-container">
		<!-- 蓝色背景区域 -->
		<view class="header-bg"></view>

		<!-- 悬浮内容区域 -->
		<view class="content-container">
			<!-- 车辆图片 -->
			<view class="vehicle-illustration">
				<image src="/static/images/xtx/添加车辆.png" class="illustration-image" mode="aspectFit" />
			</view>

			<!-- 表单区域 -->
			<view class="form-container">
				<!-- 车辆类型 -->
				<view class="form-item">
					<view class="form-label">车辆类型</view>
					<view class="form-input" @click="showVehicleTypePicker">
						<text class="input-text" :class="{ 'placeholder': !formData.vehicleType }">
							{{ formData.vehicleType || '请选择' }}
						</text>
						<text class="arrow-icon">></text>
					</view>
				</view>

				<!-- 车辆型号 -->
				<view class="form-item">
					<view class="form-label">车辆型号</view>
					<view class="form-input" @click="showVehicleModelPicker">
						<text class="input-text" :class="{ 'placeholder': !formData.vehicleModel }">
							{{ formData.vehicleModel || '请选择' }}
						</text>
						<text class="arrow-icon">></text>
					</view>
				</view>

				<!-- 车牌号码 -->
				<view class="form-item">
					<view class="form-label">车牌号码</view>
					<input class="form-input-text" v-model="formData.plateNumber" placeholder="请输入您的车牌号"
						placeholder-class="input-placeholder" />
				</view>

				<!-- 车主姓名 -->
				<view class="form-item">
					<view class="form-label">车主姓名</view>
					<input class="form-input-text" v-model="formData.ownerName" placeholder="请输入您的姓名"
						placeholder-class="input-placeholder" />
				</view>

				<!-- 电话号码 -->
				<view class="form-item">
					<view class="form-label">电话号码</view>
					<input class="form-input-text" v-model="formData.phoneNumber" placeholder="请输入您的手机号"
						placeholder-class="input-placeholder" type="number" />
				</view>

				<!-- 照片上传 -->
				<view class="form-item">
					<view class="form-label">照片</view>
					<view class="photo-upload" @click="chooseImage">
						<view v-if="!formData.vehicleImage" class="upload-placeholder">
							<text class="upload-icon">+</text>
							<text class="upload-text">上传车辆照片</text>
						</view>
						<image v-else :src="formData.vehicleImage" class="uploaded-image" mode="aspectFill" />
					</view>
				</view>
			</view>

			<!-- 添加车辆按钮 -->
			<button class="add-vehicle-btn" @click="submitForm">
				<text class="btn-icon">+</text>
				<text class="btn-text">添加车辆</text>
			</button>
			<view class="bottom-bar-bg"></view>
		</view>

		<!-- 车辆类型选择器 -->
		<picker :value="vehicleTypeIndex" :range="vehicleTypeList" @change="onVehicleTypeChange" v-if="showTypePicker">
		</picker>

		<!-- 车辆型号选择器 -->
		<picker :value="vehicleModelIndex" :range="vehicleModelList" @change="onVehicleModelChange"
			v-if="showModelPicker">
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					vehicleType: '',
					vehicleModel: '',
					plateNumber: '',
					ownerName: '',
					phoneNumber: '',
					vehicleImage: ''
				},
				// 车辆类型列表
				vehicleTypeList: ['轿车', 'SUV', 'MPV', '跑车', '货车', '客车'],
				vehicleTypeIndex: 0,
				// 车辆型号列表
				vehicleModelList: ['奔驰-GR', '宝马X5', '奥迪A6', '大众帕萨特', '丰田凯美瑞'],
				vehicleModelIndex: 0,
				// 选择器显示状态
				showTypePicker: false,
				showModelPicker: false
			}
		},
		methods: {
			// 显示车辆类型选择器
			showVehicleTypePicker() {
				this.showTypePicker = true;
				// 这里可以使用uni.showActionSheet或其他选择器组件
				uni.showActionSheet({
					itemList: this.vehicleTypeList,
					success: (res) => {
						this.vehicleTypeIndex = res.tapIndex;
						this.formData.vehicleType = this.vehicleTypeList[res.tapIndex];
					}
				});
			},

			// 显示车辆型号选择器
			showVehicleModelPicker() {
				this.showModelPicker = true;
				uni.showActionSheet({
					itemList: this.vehicleModelList,
					success: (res) => {
						this.vehicleModelIndex = res.tapIndex;
						this.formData.vehicleModel = this.vehicleModelList[res.tapIndex];
					}
				});
			},

			// 车辆类型选择变化
			onVehicleTypeChange(e) {
				this.vehicleTypeIndex = e.detail.value;
				this.formData.vehicleType = this.vehicleTypeList[e.detail.value];
			},

			// 车辆型号选择变化
			onVehicleModelChange(e) {
				this.vehicleModelIndex = e.detail.value;
				this.formData.vehicleModel = this.vehicleModelList[e.detail.value];
			},

			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.formData.vehicleImage = res.tempFilePaths[0];
					},
					fail: (err) => {
						console.log('选择图片失败:', err);
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},

			// 表单验证
			validateForm() {
				if (!this.formData.vehicleType) {
					uni.showToast({
						title: '请选择车辆类型',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.vehicleModel) {
					uni.showToast({
						title: '请选择车辆型号',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.plateNumber) {
					uni.showToast({
						title: '请输入车牌号码',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.ownerName) {
					uni.showToast({
						title: '请输入车主姓名',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.phoneNumber) {
					uni.showToast({
						title: '请输入电话号码',
						icon: 'none'
					});
					return false;
				}
				// 验证手机号格式
				const phoneReg = /^1[3-9]\d{9}$/;
				if (!phoneReg.test(this.formData.phoneNumber)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return false;
				}
				return true;
			},

			// 提交表单
			submitForm() {
				if (!this.validateForm()) {
					return;
				}

				// 显示加载中
				uni.showLoading({
					title: '添加中...'
				});

				// 这里应该调用接口提交数据
				// 模拟提交过程
				setTimeout(() => {
					uni.hideLoading();

					// 跳转到成功页面
					uni.navigateTo({
						url: '/pages/my/success/success'
					});
				}, 2000);
			}
		}
	}
</script>

<style scoped>
	.page-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 蓝色背景区域 */
	.header-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		background: linear-gradient(135deg, #3385fd 0%, #3385fd 100%);
		z-index: 1;
	}

	/* 悬浮内容区域 */
	.content-container {
		position: absolute;
		top: 20rpx;
		left: 3%;
		width: 86%;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		z-index: 2;
		padding: 40rpx 30rpx 90rpx;
		/* min-height: 700rpx; */
		height: 880rpx;
		
	}

	/* 车辆插图区域 */
	.vehicle-illustration {
		display: flex;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.illustration-image {
		width: 400rpx;
		height: 200rpx;
	}

	/* 表单容器 */
	.form-container {
		margin-bottom: 60rpx;
	}

	/* 表单项 */
	.form-item {
		display: flex;
		/*使得左侧表单项与右侧框框居中*/
		/* align-items: center; */
		margin-bottom: 30rpx;
	}

	/* 表单标签 */
	.form-label {
		width: 160rpx;
		height: 60rpx;
		background: #4FA2FF;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		flex-shrink: 0;
		color: #ffffff;

	}

	/* 表单输入框 */
	.form-input {
		flex: 1;
		height: 60rpx;
		background-color: #ffffff;
		border: 2rpx solid #e0e0e0;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.form-input-text {
		flex: 1;
		height: 60rpx;
		background-color: #ffffff;
		border: 2rpx solid #e0e0e0;
		border-radius: 30rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.input-text {
		font-size: 28rpx;
		color: #333333;
	}

	.input-text.placeholder {
		color: #999999;
	}

	.arrow-icon {
		font-size: 25rpx;
		color: #999999;
		font-weight: bold;
		 transform: rotate(90deg);
	}

	.input-placeholder {
		color: #999999;
		font-size: 28rpx;
	}

	/* 照片上传区域 */
	.photo-upload {
	/* 	flex: 1; */
		width: 180rpx;
		height: 180rpx;
		background-color: #ffffff;
		border: 2rpx solid #e0e0e0;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		position: relative;
		overflow: hidden;
	}

	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.upload-icon {
		font-size: 48rpx;
		color: #cccccc;
		margin-bottom: 10rpx;
	}

	.upload-text {
		font-size: 24rpx;
		color: #999999;
	}

	.uploaded-image {
		width: 100%;
		height: 100%;
		border-radius: 28rpx;
	}

	/* 添加车辆按钮 - 固定在底部 */
	.add-vehicle-btn {
		position: fixed;
		left: 7%;
		right: 7%;
		bottom: calc(env(safe-area-inset-bottom) + 24rpx);
		height: 80rpx;
		background: #3789FF;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		/* box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.3); */
		z-index: 99;
	}

	/* 底部白色背景区域 */
	.bottom-bar-bg {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(env(safe-area-inset-bottom) + 140rpx);
		background-color: #ffffff;
		z-index: 98;
		pointer-events: none;
	}

	.btn-icon {
		font-size: 50rpx;
		color: #ffffff;
		margin-right: 16rpx;
		/* font-weight: bold; */
	}

	.btn-text {
		font-size: 30rpx;
		color: #ffffff;
		font-weight: 500;
	}
</style>